<script setup>
import { Plus, Upload } from '@element-plus/icons-vue'
import {ref} from 'vue'
import avatar from '@/assets/default.png'
import { useTokenStore } from '@/stores/token.js'
import {userInfoStore} from '@/stores/userInfo.js'
import {uploadAvatarService} from '@/api/user.js'
import { ElMessage } from 'element-plus'
const userInfo = userInfoStore()
const tokenStore = useTokenStore()
const uploadRef = ref()

//用户头像地址
const imgUrl= ref(userInfo.info.userPie)
// 上传图片的回调函数
const uploadSuccess = (res)=>{
    imgUrl.value = res.data
}
// 更新数据库头像信息
const updateArticleInfo = async ()=>{
    const res = await uploadAvatarService(imgUrl.value)
    ElMessage.success(res.msg?res.msg:'上传成功')
    // 存储到pinia中
    userInfo.info.userPic = imgUrl.value
}
</script>

<template>
    <div class="page-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="title">头像管理</span>
                </div>
            </template>
            
            <div class="avatar-content">
                <div class="avatar-wrapper">
                    <el-upload 
                        ref="uploadRef"
                        class="avatar-uploader" 
                        :show-file-list="false"
                        :auto-upload="true"
                        action="/api/upload"
                        name="file"
                        :headers="{'Authorization': tokenStore.token}"
                        :on-success="uploadSuccess"
                    >
                        <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                        <img v-else :src="avatar" class="default-avatar" />
                    </el-upload>
                    <div class="avatar-actions">
                        <el-button type="primary" @click="uploadRef.$el.querySelector('input').click()" class="select-button">
                            <el-icon><Plus /></el-icon>选择图片
                        </el-button>
                        <el-button type="success" @click="updateArticleInfo" class="upload-button">
                            <el-icon><Upload /></el-icon>上传头像
                        </el-button>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.page-container {
    padding: 20px;
    
    .box-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
        }
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }
    }

    .avatar-content {
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .avatar-wrapper {
        text-align: center;
    }

    .avatar-uploader {
        :deep() {
            .avatar {
                width: 278px;
                height: 278px;
                display: block;
                border-radius: 8px;
                object-fit: cover;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                transition: all 0.3s;

                &:hover {
                    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
                }
            }

            .default-avatar {
                width: 278px;
                height: 278px;
                display: block;
                border-radius: 8px;
                object-fit: cover;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            }

            .el-upload {
                border: 1px dashed var(--el-border-color);
                border-radius: 8px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: var(--el-transition-duration-fast);

                &:hover {
                    border-color: var(--el-color-primary);
                }
            }
        }
    }

    .avatar-actions {
        margin-top: 20px;
        display: flex;
        gap: 10px;
        justify-content: center;
    }
}

.select-button, .upload-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.select-button {
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
    color: white !important;
    
    &:hover {
        background-color: var(--el-color-primary-light-3) !important;
        border-color: var(--el-color-primary-light-3) !important;
    }
}

.upload-button {
    background-color: var(--el-color-success) !important;
    border-color: var(--el-color-success) !important;
    color: white !important;
    
    &:hover {
        background-color: var(--el-color-success-light-3) !important;
        border-color: var(--el-color-success-light-3) !important;
    }
}

.el-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
</style>